<template>
  <view class="page content">
    <unitv-page id="indexPage" ref="unitvPage" @back="pageBack">


      <view class="title">Title</view>
<!--      <unitv-zone v-for="(videoItemList,indexH) in videoList"  :key="indexH" :id="'zone'+indexH" class="zone4" :up="'zone'+(indexH-1)" :down="'zone'+(indexH+1)" :values="videoItemList" :column="3">-->
<!--        <unitv-scroll>-->
<!--          <unitv-item v-for="(a,index) in videoItemList" :item="index" :key="index" class="item">-->
<!--            <image :src="a.imgURL" mode="aspectFill" />-->
<!--          </unitv-item>-->
<!--        </unitv-scroll>-->
<!--      </unitv-zone>-->

      <unitv-zone id="zone1" class="zone2" :autoFous="true" down="zone2"  :values="videoList2" :column="videoList2.length" >
        <unitv-item v-for="(a,index) in videoList2" :item="index" :key="index" class="item" @click="clickItem">
          <image :src="a.imgURL"  mode="aspectFill" />
        </unitv-item>
      </unitv-zone>

      <view v-for="(videoItemList,indexH) in videoList"  :key="indexH">
        <unitv-zone :id="'zone'+(indexH+2)" class="zone2" :up="'zone'+(indexH+1)" :down="'zone'+(indexH+3)"  :values="videoItemList" :column="videoItemList.length">
          <unitv-item v-for="(a,index) in videoItemList" :item="index" :key="index" class="item" @click="clickItem">
            <image src="/static/images/img.png" mode="aspectFill" />
          </unitv-item>
        </unitv-zone>
      </view>


    </unitv-page>
  </view>
</template>

<script>
import http from '@/http.js'
export default {
  data() {
    return {
      videoList: [],
      videoList2: [],
    }
  },
  onBackPress(options) {
    this.$refs.unitvPage.evtBack();
    return true;
  },
  computed: {},
  onLoad() {
    // http('https://kinorim.gulum.vip/v5/index/home',{},{
    //   hideLoading:false,
    //   hideMsg:true,
    // }).then(res=>{
    //   console.log(res)
    //   this.new_video = res.data.video
    //   this.topic = res.data.topic
    //   this.left_ads = res.data.ads.left_ads
    // }).catch(err=>{
    //   console.log(err)
    //
    // })
    uni.request({
      url: "https://gitee.com/dychang/uniapp-tv/raw/master/videos.json",
      method: "GET", // 默认 post 请求
      header: {
        "Content-Type":"application/json"
      },
      success: res => { // 服务器成功返回的回调函数
        if (res.statusCode === 200) {
          this.videoList2=[]
          this.videoList=[]
          console.log("res.data"+JSON.stringify(res.data))
          res.data.videos.forEach((ele,index)=>{
            if(index==0){
              this.videoList2=ele
            }else{
              this.videoList.push(ele)
            }
          })

        } else { // 返回值非 200，强制显示提示信息
          this.addDefaultData();
        }
      },
      fail: (err) => { // 接口调用失败的回调函数
        uni.showToast({
          title: '操作数据失败',
          icon: 'none',
          duration: 2000
        });
        this.addDefaultData();
      }
    })
  },
  onReady() {

  },
  methods: {
    addDefaultData(){
      this.videoList2=[
        {
          "index": 1,
          "name":"视频1",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img.png",
          "videoURL": ""
        },
        {
          "index": 2,
          "name":"视频2",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_1.png",
          "videoURL": ""
        },
        {
          "index": 3,
          "name":"视频3",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_2.png",
          "videoURL": ""
        },
        {
          "index": 4,
          "name":"视频4",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_3.png",
          "videoURL": ""
        }
      ]
      this.videoList=[[
        {
          "index": 1,
          "name":"视频1",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img.png",
          "videoURL": ""
        },
        {
          "index": 2,
          "name":"视频2",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_1.png",
          "videoURL": ""
        },
        {
          "index": 3,
          "name":"视频3",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_2.png",
          "videoURL": ""
        },
        {
          "index": 4,
          "name":"视频4",
          "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_3.png",
          "videoURL": ""
        }
      ],
        [
          {
            "index": 5,
            "name":"视频5",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img.png",
            "videoURL": ""
          },
          {
            "index": 6,
            "name":"视频6",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_1.png",
            "videoURL": ""
          },
          {
            "index": 7,
            "name":"视频7",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_2.png",
            "videoURL": ""
          },
          {
            "index": 8,
            "name":"视频8",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_3.png",
            "videoURL": ""
          }
        ],
        [
          {
            "index": 9,
            "name":"视频9",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img.png",
            "videoURL": ""
          },
          {
            "index": 10,
            "name":"视频10",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_1.png",
            "videoURL": ""
          },
          {
            "index": 11,
            "name":"视频11",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_2.png",
            "videoURL": ""
          },
          {
            "index": 12,
            "name":"视频12",
            "imgURL": "https://gitee.com/dychang/uniapp-tv/raw/master/common/images/img_3.png",
            "videoURL": ""
          }
        ]
      ]
    },
    pageBack(e) {
      console.log("按了返回");
      uni.showModal({
        title: '提示',
        content: '是否退出',
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定');
            plus.runtime.quit();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
      return false;
    },
    hoverItem(e) {
      console.log("获得焦点：" + e)

    },
    clickItem(e) {
      console.log("点击了：" + e);
      uni.showToast({
        title: '成功点击了',
        icon: 'none',
        duration: 2000
      });
    }
  }
}
</script>



<style>
.content {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 30rpx;
  margin-left: 10rpx;
}

.item {
  background: #d6d6d6;
  margin: 0px 10rpx;
  text-align: center;
  display: inline-block;
}

.zone1 {
  height: 50rpx;
  width: 100%;
  display: flex;
  white-space: nowrap;
  margin-top: 40rpx;
  align-items: center;
}

.zone1 .item {
  width: 80rpx;
  height: 40rpx;
  line-height: 40px;
}

.zone2 {
  margin-top: 5rpx;
  display: flex;
  height: 260rpx;
  align-items: center;
}

.zone2 .item {
  width: 25%;
  height: 105px;
  line-height: 150px;
  overflow: hidden;
  margin: 5px 10px;
  border-radius: 10px;
}

.zone2 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone3 {
  margin-top: 5rpx;
  display: flex;
  height: 110rpx;
  align-items: center;
}

.zone3 .item {
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.zone3 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone4 {
  margin-top: 5rpx;
  width: 100%;
  height: 110rpx;
  display: inline-block;
  white-space: nowrap;
  align-items: center;
}

.zone4 .item {
  width: 25%;
  height: 100rpx;
  line-height: 100rpx;
  overflow: hidden;
  border-radius: 20rpx;
}

.zone4 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.zone4 .item.item-hover {

}

.zone5 {
  margin-top: 5rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50rpx;
  align-items: center;
  padding: 20rpx;
}

.zone5 .item {
  width: 125rpx;
  height: 155rpx;
  line-height: 115rpx;
  margin: 5rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  border-radius: 10rpx;
  transition: all linear 0.2s;
}

.zone5 .item image {
  width: 100%;
  height: 100%;
  display: block;
}

.item-hover {
  transform: scale(1.04);
  box-shadow: 2px 4px 6px #555555;
  animation: glow 1500ms ease-out infinite alternate;
  -webkit-transform: scale(1.04);
  -webkit-box-shadow: 2px 4px 6px #555555;
  -webkit-animation: glow 1500ms ease-out infinite alternate;
  /* background: #585dfa; */
  zoom: 1.05;
}

.zone1 .item-active {
  zoom: 0;
  background: #4CD964
}

.zone1 .item-hover {
  zoom: 0;
  background: #DD524D
}

.zone5 .item-hover {
  zoom: 0;
}
</style>
